<template>
  <div class="home-box">
    <!-- 功能区 -->
    <div class="home-operation">
      <div class="main_card_cl all_card_cl">
        <div class="header_title">主界面</div>
        <div class="home-img">
          <!-- <el-image class="cur-img" :src="imageUrl" fit="contain" /> -->
          <img class="cur-img" src="@/assets/images/home-data.png" alt="" />
          <div class="test-box-contain">
            <div class="zero-cl" @click="commEvent.onImg('solution', -1)"></div>
            <div class="first-cl" @click="commEvent.onImg('solution', -2)">
              <img
                v-show="devices.solution.status == 2 || devices.solution.status == 3 || devices.solution.status == 4"
                src="./img/1.png"
              />
              <img v-show="devices.solution.status == 1 || devices.solution.status == 5" src="./img/111.png" />
            </div>
            <div class="robotic_arm_cl" @click="commEvent.onImg('robotic', -1)"></div>
            <div class="robotic_arm_one_cl" @click="commEvent.onImg('robotic', -1)"></div>
            <div class="second_cl one_cl" @click="commEvent.onImg('gushList', 0)" :class="gushListStatusClass(0)"></div>
            <div class="second_cl two_cl" @click="commEvent.onImg('gushList', 1)" :class="gushListStatusClass(1)"></div>
            <div class="second_cl three_cl" @click="commEvent.onImg('gushList', 2)" :class="gushListStatusClass(2)"></div>
            <div class="second_cl four_cl" @click="commEvent.onImg('gushList', 3)" :class="gushListStatusClass(3)"></div>
            <div class="second_cl five_cl" @click="commEvent.onImg('gushList', 4)" :class="gushListStatusClass(4)"></div>
            <div class="second_cl six_cl" @click="commEvent.onImg('gushList', 5)" :class="gushListStatusClass(5)"></div>
            <div class="second_cl seven_cl" @click="commEvent.onImg('gushList', 6)" :class="gushListStatusClass(6)"></div>
            <div class="second_cl eight_cl" @click="commEvent.onImg('gushList', 7)" :class="gushListStatusClass(7)"></div>
            <div class="three-cl one_cl" @click="commEvent.onImg('stoveList', 0)" :class="stoveListStatusClass(0)"></div>
            <div class="three-cl two_cl" @click="commEvent.onImg('stoveList', 1)" :class="stoveListStatusClass(1)"></div>
            <div class="three-cl three_cl" @click="commEvent.onImg('stoveList', 2)" :class="stoveListStatusClass(2)"></div>
            <div class="three-cl four_cl" @click="commEvent.onImg('stoveList', 3)" :class="stoveListStatusClass(3)"></div>
            <div class="three-cl five_cl" @click="commEvent.onImg('stoveList', 4)" :class="stoveListStatusClass(4)"></div>
            <div class="three-cl six_cl" @click="commEvent.onImg('stoveList', 5)" :class="stoveListStatusClass(5)"></div>
            <div class="three-cl seven_cl" @click="commEvent.onImg('stoveList', 6)" :class="stoveListStatusClass(6)"></div>
            <div class="three-cl eight_cl" @click="commEvent.onImg('stoveList', 7)" :class="stoveListStatusClass(7)"></div>
            <div class="four-cl one_cl" @click="commEvent.onImg('stoveList', 8)" :class="stoveListStatusClass(8)"></div>
            <div class="four-cl two_cl" @click="commEvent.onImg('stoveList', 9)" :class="stoveListStatusClass(9)"></div>
            <div class="four-cl three_cl" @click="commEvent.onImg('stoveList', 10)" :class="stoveListStatusClass(10)"></div>
            <div class="four-cl four_cl" @click="commEvent.onImg('stoveList', 11)" :class="stoveListStatusClass(11)"></div>
            <div class="four-cl five_cl" @click="commEvent.onImg('stoveList', 12)" :class="stoveListStatusClass(12)"></div>
            <div class="four-cl six_cl" @click="commEvent.onImg('stoveList', 13)" :class="stoveListStatusClass(13)"></div>
            <div class="four-cl seven_cl" @click="commEvent.onImg('stoveList', 14)" :class="stoveListStatusClass(14)"></div>
            <div class="four-cl eight_cl" @click="commEvent.onImg('stoveList', 15)" :class="stoveListStatusClass(15)"></div>
            <img
              class="five-cl"
              v-show="Number(devices.xrf.roboticArmStatus) == 1"
              @click="commEvent.onImg('xrf', -1)"
              src="./img/5_1_1.png"
            />
            <img
              class="five-cl"
              @click="commEvent.onImg('xrf', -1)"
              v-show="Number(devices.xrf.roboticArmStatus) == 2"
              src="./img/55_1_1.png"
            />
            <img
              class="five-one-cl"
              @click="commEvent.onImg('xrf', -1)"
              v-show="Number(devices.xrf.roboticArmStatus) == 1"
              src="./img/5_2_2.png"
            />
            <img
              class="five-one-cl"
              @click="commEvent.onImg('xrf', -1)"
              v-show="Number(devices.xrf.roboticArmStatus) == 2"
              src="./img/55_2_1.png"
            />
            <img
              v-show="devices.fabricate.status == 2"
              class="six-cl"
              @click="commEvent.onImg('fabricate', -1)"
              src="./img/6.png"
            />
            <img
              v-show="devices.fabricate.status !== 1 && devices.fabricate.status !== 2 && devices.fabricate.status !== -1"
              class="six-cl"
              @click="commEvent.onImg('fabricate', -1)"
              src="./img/666.png"
            />
            <div class="seven-cl">
              <div
                v-for="(item, index) in devices.chemicalTankList.slice(0, 12)"
                :key="index"
                class="test-box"
                @click="commEvent.onImg('chemicalTankList', index)"
              >
                <div
                  :class="{
                    'success-test': item.status == 2,
                    'error-test': item.status !== 1 && item.status !== 2
                  }"
                  class="item"
                ></div>
              </div>
            </div>
            <div class="eight-cl">
              <div
                v-for="(item, index) in devices.chemicalTankList.slice(-12)"
                :key="index"
                class="test-box"
                @click="commEvent.onImg('chemicalTankList', index + 12)"
              >
                <div
                  :class="{
                    'success-test': item.status == 2,
                    'error-test': item.status !== 1 && item.status !== 2
                  }"
                  class="item"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="opertion_cl all_card_cl">
        <div class="header_title">主功能区</div>
        <el-row class="btn_cl">
          <el-col :span="16">
            <el-button type="primary" @click="commEvent.onClick">复位系统</el-button>
            <el-button type="primary" @click="commEvent.onClick">启动实验</el-button>
            <el-button type="primary" @click="commEvent.onClick">终止实验</el-button>
            <el-button type="primary" @click="commEvent.onClick">暂停/继续实验</el-button>
          </el-col>
          <el-col :span="8">
            <el-row justify="end">
              <el-button type="primary" @click="resetVisible = true">复位设备</el-button>
              <el-button type="primary" @click="edxVisible = true">EDX检测插样</el-button>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 信息区 -->
    <div class="home-data">
      <div class="top_cl">
        <div class="all_card_cl info_cl">
          <div class="header_title">设备参数信息</div>
          <div class="config-box">
            <div v-if="mockConfig && mockConfig.length" class="config-list">
              <div v-for="item in mockConfig" :key="item.key" class="list-item">
                <div class="item-label">{{ typeText[item.key as keyof typeof typeText] || item.key }}：</div>
                <div class="item-value">{{ getStatusValue(item.key, item.value) || "暂无" }}</div>
              </div>
            </div>
            <el-empty v-else :image-size="30" description="暂无设备参数信息" />
          </div>
        </div>
        <div class="all_card_cl error_cl">
          <div class="header_title">
            <span>设备故障信息</span> <el-button size="small" round @click="commEvent.clearError">清除</el-button>
          </div>
          <div class="config-box">
            <div v-if="errorMessages && errorMessages.length > 0" class="config-list">
              <div v-for="item in errorMessages" :key="item.id" class="list-items">
                <img src="@/assets/images/experiment/1.png" class="list-img" />
                <div class="list-info">
                  <div class="info-time">{{ item.time }}</div>
                  <div class="info-device">{{ item.deviceName }}</div>
                  <div class="info-code">{{ item.errorCode }}</div>
                </div>
              </div>
            </div>
            <el-empty v-else :image-size="30" description="暂无设备故障信息" />
          </div>
        </div>
      </div>
      <div class="bottom_cl">
        <div class="all_card_cl">
          <div class="header_title"><span>实验统计</span></div>
          <div class="data-charts">
            <e-charts :option="option" />
            <div class="echart-option">
              <div class="option-text">次数</div>
              <div class="option-btn">
                <div
                  v-for="(item, index) in chartWeeks"
                  :key="index"
                  @click="commEvent.checkChartWeek(index)"
                  class="btn-text"
                  :class="{ 'btn-active': index === activeWeek }"
                >
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 复位设备 -->
    <reset-device v-model="resetVisible" />
    <!-- EDX插样 -->
    <edx-sample v-model="edxVisible" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, nextTick } from "vue"
import { statusMappings, keyToMapping } from "./data"
import ResetDevice from "./components/ResetDevice.vue"
import EdxSample from "./components/EdxSample.vue"
import { ECOption } from "@/components/ECharts/config"
import ECharts from "@/components/ECharts/index.vue"
import { deviceErrorMessage } from "@/api/modules/home"
import { mockSave } from "@/api/modules/comm"
import { ElMessage } from "element-plus"
// 参数
const chartWeeks: string[] = ["近7日", "近30日"] // 图表周期
const activeWeek = ref<number>(0) // 激活周期
const errorMessages = ref<any[]>([]) // 设备故障信息
const resetVisible = ref<boolean>(false) // 复位弹窗
const edxVisible = ref<boolean>(false) // EDX弹窗
const activeType = ref("")
const activeIndex = ref(0)
// 只定义stoveList元素的类型
type StoveItem = {
  alarmInfo: string
  channelStatus: string
  currentHeat: string
  heatPrecision: string
  onlineTime: string
  remainingTime: string
  roboticArmPosition: string
  roboticArmStatus: string
  targetHeat: string
  [key: string]: any // 允许其他属性存在
}
// 只定义GushList元素的类型
type GushListItem = {
  accumulateTime: string
  alarmInfo: string
  channelStatus: string
  coordinateStatus: string
  onlineTime: string
  platformPosition: string
  realTraffic: string
  settingTraffic: string
  [key: string]: any // 允许其他属性存在
}
// 只定义chemicalTankList元素的类型
type chemicalTankListItem = {
  connectStatus: string
  liquidLevelStatus: string
  onlineTime: string
  realTime: string
  roboticArmPosition: string
  roboticArmTask: string
  status: number
  workstationNo: string
  [key: string]: any // 允许其他属性存在
}
// 计算单个通道的类名
const stoveListStatusClass = (index: number) => {
  const channel = devices.value.stoveList?.[index]
  if (!channel) return ""
  return {
    "success-test": Number(channel.channelStatus) == 0,
    "error-test": Number(channel.channelStatus) == 2
  }
}
// 计算单个通道的类名
const gushListStatusClass = (index: number) => {
  const channel = devices.value.gushList?.[index]
  if (!channel) return ""
  return {
    "success-test": Number(channel.channelStatus) == 2,
    "error-test": Number(channel.channelStatus) > 2
  }
}
const getStatusValue = (key: string, value: number | string): string => {
  // 添加索引签名：[key: string]: any
  const keyMap: {
    [key: string]: { [key: string]: string }
  } = {
    solution: { status: "solutionStatus" },
    gushList: { channelStatus: "gushInfoChannelStatus" },
    stoveList: { roboticArmStatus: "stoveRoboticArmStatus" },
    fabricate: { status: "fabricateStatus" },
    chemicalTankList: { status: "chemicalTankListStatus" }
  }

  const typeMap = keyMap[activeType.value] || {}
  if (typeMap[key]) {
    key = typeMap[key]
  }
  // 获取对应的映射类型
  const mappingType = keyToMapping[key as keyof typeof keyToMapping] || "status"
  // 获取具体的映射对象，并添加索引签名断言
  const mapping = statusMappings[mappingType as keyof typeof statusMappings] as { [key: string | number]: string }

  // 将 value 转为字符串后再进行索引访问
  const valueKey = String(value)

  // 返回映射值或原始值
  return mapping?.[valueKey] || value.toString()
}
const typeText = {
  status: "当前状态",
  channel8: "通道8",
  channel7: "通道7",
  channel6: "通道6",
  channel5: "通道5",
  channel4: "通道4",
  channel3: "通道3",
  channel2: "通道2",
  channel1: "通道1",
  name: "当前任务名称",
  headLackAlarm: "枪头盒缺料告警",
  onlineTime: "当前任务运行时长",
  alarmInfo: "报警信息",
  storeStatus: "西林瓶储量",
  storeAlarm: "储料仓缺料告警",
  longHeadQuantity: "长枪头盒剩余数量",
  longHeadAlarm: "长枪头盒缺料告警",
  shortHeadQuantity: "短枪头盒剩余数量",
  shortHeadAlarm: "短枪头盒缺料告警",
  longPipettingStatus: "长移液器工作状态",
  longPipettingParame: "长移液器精度参数",
  shortPipettingStatus: "短移液器工作状态",
  shortPipettingParame: "短移液器精度参数",
  deviceUPH: "设备UPH",
  channelStatus: "通道状态",
  gushInfoChannelStatus: "通道状态",
  coordinateStatus: "运动系统坐标",
  settingTraffic: "注射泵的设定流量",
  realTraffic: "注射泵的实时流量",
  accumulateTime: "样品累计喷涂时间",
  platformPosition: "移动平台的位置",
  targetHeat: "目标温度",
  currentHeat: "当前温度",
  heatPrecision: "控温精度",
  remainingTime: "剩余时间",
  roboticArmPosition: "机械臂当前位置",
  roboticArmStatus: "机械臂工作状态",
  storageAreaStatus: "存储区状态",
  instrumentStatus: "仪器连接状态",
  analyzeCondition: "当前分析条件",
  sampleName: "样品id/名称",
  resultAbstract: "检测完成后的元素分析摘要",
  workstationNo: "工位号",
  connectStatus: "连接状态",
  realTime: "实时温度",
  nutLeftNumber: "螺帽左模组数量",
  nutRightNumber: "螺帽右模组数量",
  liquidLevelStatus: "液位状态",
  roboticArmTask: "机器人任务",
  tabNumber: "极耳数量",
  beakerHolderNumber: "烧杯架数量",
  platformWorkstation: "旋转台当前工位",
  oneNumberMotor: "1号钛电机上料情况",
  twoNumberMotor: "2号钛电机上料情况",
  threeNumberMotor: "3号钛电机上料情况",
  fourNumberMotor: "4号钛电机上料情况",
  oneNumberLid: "1号防护盖上料情况",
  twoNumberLid: "2号防护盖上料情况",
  threeNumberLid: "3号防护盖上料情况",
  fFourNumberLid: "4号防护盖上料情况"
}
const errorMessage = ref("")
// 组件状态
// const wsUrl = ref("ws://192.168.3.80:28310/kedasys2/api/device/detection/info")
const wsUrl = ref("ws://4i46851g45.qicp.vip/kedasys2/api/device/detection/info")
const webSocket = ref<WebSocket | null>(null)

const mockConfig = ref<any[]>([])

const devices = ref({
  solution: {
    status: -1, //当前状态（-1：无，0：设备正常空闲，1：设备急停中，2：设备复位中，3：设备运行中，4：设备复位完成，5：设备运行错误）
    name: "", //当前任务名称
    onlineTime: "", //当前任务运行时长
    alarmInfo: "", //报警信息
    storeStatus: "", //西林瓶储量（例如：150/200个）
    storeAlarm: "", //储料仓缺料告警（0：正常，1：缺料）
    longHeadQuantity: "", //长枪头盒剩余数量
    shortHeadQuantity: "", //短枪头盒剩余数量
    headLackAlarm: "", //TODO 长、短告警合并 枪头盒缺料告警:
    longPipettingStatus: "", //长移液器工作状态（0：空闲，1：运行中）
    longPipettingParame: "", //长移液器精度参数
    shortPipettingStatus: "", //短移液器工作状态（0：空闲，1：运行中）
    shortPipettingParame: "", //短移液器精度参数
    deviceUPH: "", //设备UPH（每小时产出）
    queueStatus: {} //排队区状态（key：通道号，value：状态（0 空闲，1：有料））
  },
  stoveList: [] as StoveItem[],
  gushList: [] as GushListItem[],
  fabricate: {
    status: -1, //当前状态（0：手动状态，1：自动停止状态，2：自动运行状态，3：半自动运行状态，4：故障状态，5：复位中，6：复位完成）
    name: "", //当前任务名称
    onlineTime: "", //当前任务运行时长
    alarmInfo: "", //报警信息
    platformWorkstation: "", //旋转台当前工位
    nutLeftNumber: "", //螺帽左模组数量
    nutRightNumber: "", //螺帽右模组数量
    tabNumber: "", //极耳数量
    beakerHolderNumber: "" //烧杯架数量
  },
  chemicalTankList: [] as chemicalTankListItem[],
  xrf: {
    alarmInfo: "",
    analyzeCondition: "",
    instrumentStatus: "",
    name: "",
    onlineTime: "",
    resultAbstract: "",
    roboticArmPosition: "",
    roboticArmStatus: "",
    sampleName: "",
    storageAreaStatus: ""
  }
})

// 实验统计图表数据
const statistics = ref<{ date: number[]; data: number[] }>({
  date: [1, 2, 3, 4, 5, 6, 7],
  data: [1, 4, 6, 5, 4, 3, 2]
})
// 实验统计图表
const option = computed<ECOption>(() => {
  return {
    grid: {
      //使图表占据整个canvas大小
      top: 10,
      bottom: 20
    },
    legend: {},
    xAxis: {
      type: "category",
      data: statistics.value.date
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        type: "bar",
        data: statistics.value.data,
        color: "#460451",
        barWidth: 20
      }
    ]
  }
})
// 建立WebSocket连接
const connect = () => {
  // if (isConnected.value || isConnecting.value) return

  // isConnecting.value = true
  // clearError()

  try {
    webSocket.value = new WebSocket(wsUrl.value)

    webSocket.value.onopen = () => {
      console.log("WebSocket连接已建立")
      // isConnected.value = true
      // isConnecting.value = false
      // 设置心跳机制
      // setupHeartbeat()
    }

    webSocket.value.onmessage = handleMessage
    webSocket.value.onclose = event => {
      console.log(`WebSocket连接已关闭，代码: ${event.code}, 原因: ${event.reason}`)
      // isConnected.value = false
      // isConnecting.value = false

      // 清除心跳
      // clearHeartbeat()

      // 如果不是主动关闭，则尝试重连
      // if (event.code !== 1000) {
      //   errorMessage.value = `连接已断开，正在尝试重连...`
      //   setupReconnect()
      // }
    }

    // webSocket.value.onerror = error => {
    //   console.error("WebSocket错误:", error)
    //   errorMessage.value = `连接错误: ${error instanceof ErrorEvent ? error.message : "未知错误"}`
    //   isConnecting.value = false
    // }
  } catch (err) {
    // errorMessage.value = `连接失败: ${err instanceof Error ? err.message : String(err)}`
    // isConnecting.value = false
    // console.error("Error connecting:", err)
  }
}

// 处理接收到的消息
const handleMessage = (event: MessageEvent) => {
  try {
    const aa = JSON.parse(event.data)
    const data = JSON.parse(aa.message).data || {}
    if (data.solution) {
      devices.value = {
        ...data,
        gushList: data?.gushList ? [...data.gushList].reverse() : [],
        stoveList: data?.stoveList ? [...data.stoveList].reverse() : []
      }
      if (activeType.value && (activeIndex.value || activeIndex.value == 0)) {
        commEvent.onImg(activeType.value, activeIndex.value)
      }
    }
  } catch (err) {
    errorMessage.value = `解析消息失败: ${err instanceof Error ? err.message : String(err)}`
    console.error("Error parsing message:", err)
  }
  console.log("devices.value", devices.value)
}
// 事件
const commEvent = {
  // 设备故障信息
  getErrorMessage: async () => {
    const { data } = await deviceErrorMessage()
    errorMessages.value = data
    // errorMessages.value = [
    //   { time: 111, deviceName: 2222, errorCode: 444, id: 1 },
    //   { time: 111, deviceName: 2222, errorCode: 444, id: 1 },
    //   { time: 111, deviceName: 2222, errorCode: 444, id: 1 },
    //   { time: 111, deviceName: 2222, errorCode: 444, id: 1 },
    //   { time: 111, deviceName: 2222, errorCode: 444, id: 1 },
    //   { time: 111, deviceName: 2222, errorCode: 444, id: 1 }
    // ]
  },
  // 清除设备故障信息
  clearError: () => {
    errorMessages.value = []
    ElMessage.success("清除成功")
  },
  // 复位系统
  onClick: async () => {
    const { code } = await mockSave()
    if (code !== "200") return
    ElMessage.success("操作成功")
  },
  // 选择图表数据
  checkChartWeek: (index: number) => {
    if (activeWeek.value === index) return
    activeWeek.value = index
    if (index === 0) {
      statistics.value = {
        date: [1, 2, 3, 4, 5, 6, 7],
        data: [1, 4, 6, 5, 4, 3, 2]
      }
    } else {
      statistics.value = {
        date: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        data: [1, 4, 6, 5, 4, 3, 2, 12, 11, 1, 9, 12, 14, 11, 13, 17, 9, 16, 8, 6]
      }
    }
  },
  // 点击区域
  onImg: (type: string, index: number) => {
    activeType.value = type
    activeIndex.value = index
    if (type == "solution" && devices.value.solution) {
      const solution = devices.value.solution || {}
      if (index === -2) {
        mockConfig.value = convertToKeyValueArray(solution.queueStatus)
      } else {
        const { queueStatus, ...obj } = solution
        mockConfig.value = convertToKeyValueArray(obj)
      }
    } else if (type == "gushList" && devices.value.gushList) {
      const { platformPosition, ...parmas } = devices.value.gushList[index]
      mockConfig.value = convertToKeyValueArray(parmas)
    } else if (type == "stoveList" && devices.value.stoveList) {
      mockConfig.value = convertToKeyValueArray(devices.value.stoveList[index])
    } else if (type == "xrf" && devices.value.xrf) {
      mockConfig.value = convertToKeyValueArray(devices.value.xrf)
    } else if (type == "fabricate" && devices.value.fabricate) {
      mockConfig.value = convertToKeyValueArray(devices.value.fabricate)
    } else if (type == "chemicalTankList" && devices.value.chemicalTankList) {
      mockConfig.value = convertToKeyValueArray(devices.value.chemicalTankList[index])
    } else if (type == "robotic" && devices.value.gushList) {
      const { platformPosition } = devices.value.gushList[0] || { platformPosition: "" }
      mockConfig.value = convertToKeyValueArray({ platformPosition })
    }
    console.log("mockConfig", mockConfig)
  }
}
// 2. 转换方法
const convertToKeyValueArray = (data: object) => {
  // Object.entries(data) 提取键值对二维数组
  // .map() 遍历并转换为 { key, value } 结构
  return Object.entries(data).map(([key, value]) => ({
    key: key, // 键名作为 key 属性
    value: value // 键值作为 value 属性（保留原始类型，包括对象）
  }))
}

onMounted(() => {
  // 自动连接
  connect()
  commEvent.getErrorMessage()
})
</script>

<style lang="scss" scoped>
.home-box {
  display: flex;
  gap: 20px;
  width: 100%;
  height: 100%;
  ::v-deep(.el-card__header) {
    padding: 10px;
  }
  .all_card_cl {
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 12px rgb(0 0 0 / 12%);
    .header_title {
      display: flex;
      align-items: center;
      height: 6vh;
      padding-left: 10px;
      border-bottom: 1px solid #e4e7ed;
    }
  }
  .home-operation {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 70%;
    .main_card_cl {
      width: 100%;
      height: 80%;
      .home-img {
        position: relative;
        width: 100%;
        height: calc(100% - 6vh);
        .cur-img {
          width: 100%;
          height: 100%;
        }
        .test-box-contain {
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          .second_cl {
            position: absolute;
            display: flex;
            cursor: pointer;
            border-radius: 2px;
          }
          .second_cl.one_cl {
            top: 16.2%;
            left: 20.6%;
            width: 4.1%;
            height: 4.1%;
            transform: skew(-12deg);
          }
          .second_cl.two_cl {
            top: 16.12%;
            left: 26.05%;
            width: 4.1%;
            height: 4.1%;
            transform: skew(-10deg);
          }
          .second_cl.three_cl {
            top: 16.11%;
            left: 31.5%;
            width: 4.1%;
            height: 4.1%;
            transform: skew(-8deg);
          }
          .second_cl.four_cl {
            top: 16%;
            left: 36.98%;
            width: 4.1%;
            height: 4.1%;
            transform: skew(-5deg);
          }
          .second_cl.five_cl {
            top: 16%;
            left: 42.35%;
            width: 4.1%;
            height: 4.1%;
            transform: skew(-2deg);
          }
          .second_cl.six_cl {
            top: 15.95%;
            left: 47.85%;
            width: 4.1%;
            height: 4.1%;
          }
          .second_cl.seven_cl {
            top: 15.95%;
            left: 53.3%;
            width: 4.1%;
            height: 4.1%;
            transform: skew(3deg);
          }
          .second_cl.eight_cl {
            top: 15.95%;
            left: 58.7%;
            width: 4.1%;
            height: 4.1%;
            transform: skew(7deg);
          }
          .zero-cl {
            position: absolute;
            top: 7%;
            right: 16.5%;
            width: 11%;
            height: 20%;
            cursor: pointer;
            transform: rotate(-10deg);
            img {
              width: 100%;
              height: 100%;
            }
          }
          .robotic_arm_cl {
            position: absolute;
            top: 13%;
            right: 32%;
            width: 4%;
            height: 10%;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .robotic_arm_one_cl {
            position: absolute;
            top: 13%;
            right: 30%;
            width: 2%;
            height: 5%;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .first-cl {
            position: absolute;
            top: 18.6%;
            right: 28.7%;
            z-index: 1;
            width: 3%;
            height: 4.5%;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .three-cl {
            position: absolute;
            width: 1.3%;
            height: 2.1%;
            cursor: pointer;
            background: #848482;
            border-radius: 50%;
          }
          .three-cl.one_cl {
            top: 24.6%;
            left: 10.2%;
          }
          .three-cl.two_cl {
            top: 28.2%;
            left: 9.6%;
          }
          .three-cl.three_cl {
            top: 31.8%;
            left: 9%;
          }
          .three-cl.four_cl {
            top: 35.4%;
            left: 8.3%;
          }
          .three-cl.five_cl {
            top: 39%;
            left: 7.7%;
          }
          .three-cl.six_cl {
            top: 42.6%;
            left: 7.1%;
          }
          .three-cl.seven_cl {
            top: 46.2%;
            left: 6.4%;
          }
          .three-cl.eight_cl {
            top: 49.8%;
            left: 5.8%;
          }
          .four-cl {
            position: absolute;
            width: 1.3%;
            height: 2.1%;
            cursor: pointer;
            background: #848482;
            border-radius: 50%;
          }
          .four-cl.one_cl {
            top: 24.6%;
            left: 16.1%;
          }
          .four-cl.two_cl {
            top: 28.2%;
            left: 15.6%;
          }
          .four-cl.three_cl {
            top: 31.87%;
            left: 15.1%;
          }
          .four-cl.four_cl {
            top: 35.47%;
            left: 14.5%;
          }
          .four-cl.five_cl {
            top: 39.07%;
            left: 13.9%;
          }
          .four-cl.six_cl {
            top: 42.67%;
            left: 13.3%;
          }
          .four-cl.seven_cl {
            top: 46.27%;
            left: 12.8%;
          }
          .four-cl.eight_cl {
            top: 49.87%;
            left: 12.2%;
          }
          .five-cl {
            position: absolute;
            bottom: 23.4%;
            left: 10.3%;
            width: 10.5%;
            height: 7.6%;
            cursor: pointer;
            transform: skew(-1deg);
          }
          .five-one-cl {
            position: absolute;
            bottom: 23%;
            left: 21.4%;
            width: 5.7%;
            height: 13.5%;
            cursor: pointer;
            transform: skew(-1deg);
          }
          .six-cl {
            position: absolute;
            bottom: 32%;
            left: 38.5%;
            width: 6%;
            height: auto;
            cursor: pointer;
            transform: rotate(-1deg);
          }
          .seven-cl {
            position: absolute;
            top: 50.3%;
            right: 9.8%;
            display: flex;
            justify-content: space-between;
            width: 34.8%;
            height: 11.2%;
            transform: rotate(-0.3deg);
            .test-box {
              display: flex;
              justify-content: center;
              width: 6%;
              height: 100%;
              cursor: pointer;
              .item {
                width: 60%;
                height: 20%;
                border-radius: 10%;
                transform: rotate(-1deg);
              }
            }
          }
          .eight-cl {
            position: absolute;
            right: 6.6%;
            bottom: 20.8%;
            display: flex;
            justify-content: space-between;
            width: 37.5%;
            height: 11.2%;
            transform: rotate(-0.3deg);
            .test-box {
              display: flex;
              justify-content: center;
              width: 6%;
              height: 100%;
              cursor: pointer;
              .item {
                width: 60%;
                height: 20%;
                margin-top: 90%;
                border-radius: 10%;
                transform: rotate(-1deg);
              }

              // opacity: 0;
            }
          }
          .success-test {
            background: #00c743ff;
          }
          .error-test {
            background: #ffff16;
          }
        }
      }
    }
    .opertion_cl {
      height: 20%;
      .btn_cl {
        align-items: center;
        height: calc(100% - 6vh);
        padding: 0 10px;
      }
    }
  }
  .home-data {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 30%;
    height: 100%;
    ::v-deep(.el-empty) {
      padding: 0;
    }
    .top_cl {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 67%;
      .info_cl {
        width: 100%;
        height: 48%;
        .config-box {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: calc(100% - 6vh);
          padding: 10px;
          .config-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            height: 100%;
            overflow: auto;
            .list-item {
              display: flex;
              align-items: center;
              width: 100%;
              .item-label {
                font-size: 18px;
                color: #999999;
              }
              .item-value {
                font-size: 18px;
                color: #111111;
              }
            }
          }
        }
      }
      .error_cl {
        width: 100%;
        height: 48%;
        .header_title {
          display: flex;
          justify-content: space-between;
          padding: 0 10px;
        }
        .config-box {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: calc(100% - 6vh);
          padding: 10px;
          .config-list {
            display: flex;
            flex-direction: column;
            gap: 5px;
            width: 100%;
            height: 100%;
            overflow: auto;
            .list-items {
              display: flex;
              gap: 5px;
              width: 100%;

              // &:nth-child(n + 2) {
              //   margin-top: 20px;
              // }
              .list-img {
                width: 70px;
                background-color: #f3f3f3;
                border-radius: 5px;
              }
              .list-info {
                flex: 1;
                .info-time {
                  width: 100%;
                  font-size: 18px;
                  color: #111111;
                }
                .info-device {
                  width: 100%;
                  margin-top: 3px;
                  font-size: 18px;
                }
                .info-code {
                  width: 100%;
                  font-size: 18px;
                  color: var(--el-color-danger);
                }
              }
            }
          }
        }
      }
    }
    .bottom_cl {
      height: 33%;
      background: #ffffff;
      .all_card_cl {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        .data-charts {
          position: relative;
          height: 60%;
          padding: 10px;
          .echart-option {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: space-between;
            width: 93%;
            height: 100%;
            padding: 0 10px;
            margin-top: -10px;
            .option-text {
              font-size: 12px;
              color: #111111;
            }
            .option-btn {
              display: flex;
              gap: 10px;
              font-size: 12px;
              color: #999999;
              .btn-text {
                cursor: pointer;
              }
              .btn-active {
                color: $primary-color;
              }
            }
          }
        }
      }
    }
    .header_title {
      color: #303133;
    }
    .alarm-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .empty-box {
    width: 100%;
  }
}
</style>
